<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" id="input" value="1,2,3">
        <span>输入数字求和，数字之前用半角','分隔</span>
        <br>
        <br>
        <button id="btn">求和</button>
        <span>结果是：</span>
        <strong id="sum"></strong>
    </div>
</body>

<script>
    // 1.获取需要的节点
    var input = document.getElementById('input')
    var btn = document.getElementById('btn')
    var sum = document.getElementById('sum')

    // 2. input 的键盘抬起事件
    input.onkeyup = function () {
        // 知道输入内容的内容正则   // replace 用于在字符串中用一些字符替换另一些字符, 第一个值写指定的字符串, 第二个要替换的值, 第一个值往往是正则表达式
        // 	指明两项之间的一个选择。要匹配 |，请使用 \|。
        // 以数字开头，分隔 ,
        this.value = this.value.replace(/[^(\d)|(,)]/, "")
    }

    // 3.点击求和
    btn.onclick = function () {
        // console.log(btn);

        // 初始值为0
        var sum1 = 0

        // 让input的内容用 ’ 分割
        var input1 = document.getElementById('input').value.split(',')

        if (input1 == '') {
            alert('不能为空')
            return
        }

        // var in 出来的是value
        // parseInt 转化为数字的时候，为整数
        for (var i in input1) {
            sum1 += parseInt(input1[i])
        }

        // 4.让 sum节点的内容 = 刚刚数字的那个
        sum.innerHTML = sum1

    }


    // var input = document.getElementById('input')
    // var btn = document.getElementById('btn')
    // var sum = document.getElementById('sum')

    // // 键盘抬起事件
    // input.onkeyup = function () {
    //     this.value = this.value.replace(/[^(\d)|(,)]/, "")
    //     // (/[^(\d)|(,)]/, "")

    // }

    // btn.onclick = function () {
    //     var s = 0

    //     var input1 = document.getElementById('input').value.split(',')

    //     for (var i in input1) {
    //         s += parseInt(input1[i])
    //     }

    //     sum.innerHTML = s

    // }

</script>

</html>